<!--
 * @Author       : 梁嘉琳
 * @Date         : 2022-05-27 11:11:29
 * @LastEditors  : 梁嘉琳
 * @LastEditTime : 2022-07-13 14:11:52
 * @FilePath     : \web3d\my\examples\solarSystem.html
-->
<!DOCTYPE html>
<html lang="zh">
	<head>
		<title>太阳系-BoxGeometry</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<link rel="icon" href="../favicon.ico" />
		<link type="text/css" rel="stylesheet" href="../public/main.css" />
	</head>
	<body>
		<canvas id="fireflx"></canvas>

		<script type="importmap">
			{
				"imports": {
					"three": "../node_modules/three/build/three.module.js",
					"three/": "../node_modules/three/",
					"public/": "../public/"
				}
			}
		</script>

		<script type="module">
			import * as THREE from 'three';
			import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
			import { resizeRendererToDisplaySize } from 'public/resizeHandle.js';

			import { PointLight } from 'three';
			import { WebGLRenderer } from 'three';
			import { Object3D } from 'three';
			import { PerspectiveCamera } from 'three';
			import { Mesh } from 'three';
			import { SphereGeometry, MeshPhongMaterial, Scene } from 'three/build/three.module.js';
			import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';

			const h = window.innerHeight;
			const w = window.innerWidth;
			const k = w / h;

			const canvas = document.querySelector('#fireflx');
			let camera, scene, renderer;

			scene = new Scene();
			renderer = new WebGLRenderer({ canvas, antialias: true });

			//要旋转的对象
			const objects = [];
			//颜色，强度
			{
				const light = new PointLight(0xffffff, 3);
				scene.add(light);
			}

			camera = new PerspectiveCamera(40, 2, 0.1, 1000);
			camera.position.set(0, 50, 0);
			camera.up.set(0, 0, 1);
			camera.lookAt(0, 0, 0);

			const gui = new GUI();

			//半径，宽度切片数，高度切片数
			const sphereGeometry = new SphereGeometry(1, 6, 6);
			//添加一个空的场景图节点
			//解决将地球添加到太阳mesh中，大小与位置都放达五倍
			const solarSystem = new Object3D();
			// const solarHelper = new AxisGridHelper(solarSystem, 26);
			// gui.add(solarHelper, 'visible').name('solarSystem');
			scene.add(solarSystem);
			objects.push(solarSystem);

			//emissive放射性的，发出的
			const sunMaterial = new MeshPhongMaterial({ emissive: 0xffff00 });
			const sunMesh = new Mesh(sphereGeometry, sunMaterial);
			sunMesh.scale.set(5, 5, 5);
			solarSystem.add(sunMesh);
			objects.push(sunMesh);

			const earthOribit = new Object3D();
			earthOribit.position.x = 10;
			solarSystem.add(earthOribit);
			objects.push(earthOribit);

			const earthMaterial = new MeshPhongMaterial({ color: 0x2233ff, emissive: 0x112244 });
			const earthMesh = new Mesh(sphereGeometry, earthMaterial);
			earthOribit.add(earthMesh);
			objects.push(earthMesh);

			const moonOribit = new Object3D();
			moonOribit.position.x = 2;
			earthOribit.add(moonOribit);

			const moonMaterial = new MeshPhongMaterial({ color: 0x888888, emissive: 0x222222 });
			const moonMesh = new Mesh(sphereGeometry, moonMaterial);
			moonMesh.scale.set(0.5, 0.5, 0.5);
			moonOribit.add(moonMesh);
			objects.push(moonMesh);

			function render(time) {
				time *= 0.001;
				if (resizeRendererToDisplaySize(renderer)) {
					const canvas = renderer.domElement;
					//朝向
					camera.aspect = canvas.clientWidth / canvas.clientHeight;
					//矩阵
					camera.updateProjectionMatrix();
				}
				// objects.forEach((obj) => {
				// 	obj.rotation.y = time;
				// });
				renderer.render(scene, camera);
				requestAnimationFrame(render);
			}
			render();
		</script>
	</body>
</html>
